import { selectPretreatmentRecord } from '@/services/api/api-datahub-record';
import { updateSynchrony } from '@/services/api/api-datahub-synchrony';
import { LinkOutlined } from '@ant-design/icons';
import { ActionType, DrawerForm } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Descriptions, Divider, Flex, Image, message, Space, Spin, Tag, Typography } from 'antd';
import React, { useRef, useState } from 'react';
import ExamineRecord from './ExamineRecord';
const { Paragraph } = Typography;
interface DetialRecordProps {
  dataId: string;
  dataName: string;
  onRefurbish: () => void;
}

const DetialRecord: React.FC<DetialRecordProps> = ({ onRefurbish, dataId, dataName }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [details, setDetailsState] = useState<DatahubRecordData.SelectRecord>();

  const [expanded, setExpanded] = useState(true);

  const getDetail = async () => {
    const res = await selectPretreatmentRecord({ id: dataId });
    setDetailsState(res.data);
    setExpanded(res.data?.areas?.length <= 3);
  };

  /**
   * 版面
   * @param data
   * @returns
   */
  const viewDataEdition = (data: DatahubRecordData.SelectRecord) => {
    if ('广大' == data.factoryName) {
      if (data?.channelName == '电子报纸') {
      } else if (data?.channelName == '电视视频') {
        return (
          <>
            <Descriptions.Item label="位置编号">{data?.dataEditionNo}</Descriptions.Item>
          </>
        );
      } else {
      }
    } else {
      if (data?.channelName == '电子报纸') {
        return (
          <>
            <Descriptions.Item label="版面编号">{data?.dataEditionNo}</Descriptions.Item>
            <Descriptions.Item label="版面名称">{data?.dataEditionName}</Descriptions.Item>
          </>
        );
      } else if (data?.channelName == '电视视频') {
        return <></>;
      } else {
      }
    }
  };

  /**
   * 封面
   * @param data
   * @returns
   */
  const viewEditionSnapshot = (data: DatahubRecordData.SelectRecord) => {
    if ('广大' == data.factoryName) {
    } else {
      if (data?.channelName == '电子报纸') {
        if (data?.dataEditionSnapshot) {
          return <Image width={140} src={data?.dataEditionSnapshot[0]}></Image>;
        }
      } else if (data?.channelName == '电视视频') {
      }
    }
  };

  /**
   * 内容
   * @param data
   * @returns
   */
  const viewContent = (data: DatahubRecordData.SelectRecord) => {
    if ('广大' == data.factoryName) {
      if (data?.channelName == '电子报纸') {
      } else if (data?.channelName == '电视视频') {
        return (
          <>
            <Typography.Title level={3} style={{ textAlign: 'center' }}>
              {data?.dataName}
            </Typography.Title>
            <video
              style={{
                marginTop: '20px',
                width: '100%',
                height: '300px',
                background: '#F5F5F5',
              }}
              controls
              src={data?.dataDatahubVideos[0]}
            />
            <Paragraph>
              <a href={data?.dataSourceUrl} target="_blank" style={{ display: 'inline-block' }}>
                <LinkOutlined />
                查看原文
              </a>
            </Paragraph>
            <Paragraph>
              <blockquote
                style={{
                  fontSize: 16,
                  whiteSpace: 'pre-wrap',
                }}
              >
                {data?.dataContent}
              </blockquote>
            </Paragraph>
          </>
        );
      } else {
      }
    } else {
      if (data?.channelName == '电子报纸') {
        return (
          <>
            {data?.dataName ? (
              <Typography.Title level={3} style={{ textAlign: 'center' }}>
                {data?.dataName}
              </Typography.Title>
            ) : (
              <Typography.Title level={3} style={{ textAlign: 'center' }}>
                暂无标题
              </Typography.Title>
            )}
            <br />
            <Paragraph>
              <blockquote>
                {data?.dataAbstracts}
                <a href={data?.dataSourceUrl} target="_blank" style={{ display: 'inline-block' }}>
                  <LinkOutlined />
                  查看原文
                </a>
              </blockquote>
            </Paragraph>
            {data?.dataContent && (
              <>
                <div
                  dangerouslySetInnerHTML={{
                    __html: `${data?.dataContent}`,
                  }}
                  style={{
                    display: 'inline',
                    whiteSpace: 'pre-wrap',
                    fontSize: '20px',
                  }}
                />
              </>
            )}
          </>
        );
      } else if (data?.channelName == '电视视频') {
        return (
          <>
            {data?.dataName ? (
              <Typography.Title level={3} style={{ textAlign: 'center' }}>
                {data?.dataName}
              </Typography.Title>
            ) : (
              <Typography.Title level={3} style={{ textAlign: 'center' }}>
                暂无标题
              </Typography.Title>
            )}
            <video
              style={{
                marginTop: '20px',
                width: '100%',
                height: '300px',
                background: '#F5F5F5',
              }}
              controls
              src={data?.dataDatahubVideos[0]}
            />
            <Paragraph
              style={{
                fontSize: 16,
                whiteSpace: 'pre-wrap',
              }}
            >
              <blockquote>{data?.dataContent}</blockquote>
            </Paragraph>
          </>
        );
      } else {
        return <iframe frameborder="0" id="iFrame" width="100%" scrolling="no" height="height" src={data.dataSourceUrl} />;
      }
    }
  };

  return (
    <DrawerForm
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            {access.数据仓x配置x运营员 && (
              <Tag color={details?.isExamine == 0 ? 'red' : 'green'}>
                {details?.isExamine == 0 ? '未审核' : '已审核'}
              </Tag>
            )}
            {details?.dataName}
          </div>
          <div>
            <Space size="small">
              {(access.数据仓x配置x管理员 || access.数据仓x配置x运营员) && (
                <ExamineRecord data={details} onRefurbish={getDetail} />
              )}
            </Space>
          </div>
        </div>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={<>
        <a> {dataName}</a>
      </>}
      submitter={false}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      onOpenChange={(visible) => {
        if (visible) {
          getDetail();
        } else {
          onRefurbish();
        }
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const response = await updateSynchrony({ ...values });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return false;
        } else {
          return false;
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <Descriptions>
                  <Descriptions.Item label="等级">
                    <Tag
                      color={
                        details?.levelId === '1000'
                          ? 'error'
                          : details?.levelId === '2000'
                            ? 'warning'
                            : 'success'
                      }
                    >
                      {details?.levelName}
                    </Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="来源">
                    <Tag color="orange">{details?.sourceName}</Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="渠道">
                    <Tag color="success">{details?.channelName}</Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="聚焦">
                    <Tag color="success">{details?.focusName}</Tag>
                  </Descriptions.Item>

                  {viewDataEdition(details)}

                  {/* {details?.factoryName && (
                <Descriptions.Item label="数据源">{details?.factoryName}</Descriptions.Item>
              )} */}
                  <Descriptions.Item label="发布时间">{details?.dataReleaseTime}</Descriptions.Item>
                </Descriptions>
                <Descriptions>
                  <Descriptions.Item label="区域">
                    <div>
                      {!expanded &&
                        details?.areas?.slice(0, 3)?.map((item) => {
                          if (item.length > 0) {
                            return (
                              <div style={{ display: 'flex' }}>
                                <Space style={{ lineHeight: 2 }}>
                                  {item.map((i) => (
                                    <Tag key={i.id}>{i.name}</Tag>
                                  ))}
                                </Space>
                              </div>
                            );
                          }
                        })}
                      {expanded &&
                        details?.areas?.map((item) => {
                          if (item.length > 0) {
                            return (
                              <div style={{ display: 'flex' }}>
                                <Space style={{ lineHeight: 2 }}>
                                  {item.map((i) => (
                                    <Tag key={i.id}>{i.name}</Tag>
                                  ))}
                                </Space>
                              </div>
                            );
                          }
                        })}
                      {!expanded && details?.areas?.length > 3 && (
                        <span style={{ color: '#1677FF' }} onClick={() => setExpanded(true)}>
                          展开
                        </span>
                      )}
                      {expanded && details?.areas?.length > 3 && (
                        <span style={{ color: '#1677FF' }} onClick={() => setExpanded(false)}>
                          收起
                        </span>
                      )}
                    </div>
                  </Descriptions.Item>
                  {details?.keywords && details?.keywords.length > 0 && (
                    <Descriptions.Item label="关键词">
                      <Space size={[0, 8]} wrap>
                        {details?.keywords?.map((item) => {
                          return <Tag key={item.id}>{item.name}</Tag>;
                        })}
                      </Space>
                    </Descriptions.Item>
                  )}
                </Descriptions>

                {details?.labels && details?.labels.length > 0 && (
                  <div style={{ marginTop: -5, lineHeight: 2 }}>
                    <span
                      style={{ color: '#8C8C8C', marginRight: 10, fontSize: 14, fontWeight: 200 }}
                    >
                      标签:
                    </span>
                    <Space wrap>
                      {details?.labels.map((item) => {
                        return <Tag key={item.id}> {item.name}</Tag>;
                      })}
                    </Space>
                  </div>
                )}
                {details?.channelName != '电子报纸' && (
                  <Descriptions
                    style={{
                      marginTop: 25,
                    }}
                  >
                    <Descriptions.Item label="原文链接">
                      <a href={details?.dataSourceUrl} target="_blank">
                        <Paragraph
                          style={{
                            marginBottom: '0em',
                          }}
                          copyable
                        >
                          {details?.dataSourceUrl}
                        </Paragraph>
                      </a>
                    </Descriptions.Item>
                  </Descriptions>
                )}
                {('微信' == details?.channelName ||
                  '抖音' == details?.channelName ||
                  '今日头条' == details?.channelName ||
                  '微博' == details?.channelName) && (
                    <Descriptions
                      style={{
                        marginTop: 10,
                      }}
                    >
                      <Descriptions.Item label="">
                        <Space size="large">
                          <span>点赞量：{details?.dataLikeCount}</span>
                          <span>评论量：{details?.dataCommentCount}</span>
                          <span>阅读量：{details?.dataReadCount}</span>
                          <span>转发量：{details?.dataForwardingCount}</span>
                          {'微信' == details?.channelName && (
                            <span>在看量：{details?.dataWatchCount}</span>
                          )}
                          {'抖音' == details?.channelName && (
                            <span>播放量：{details?.dataPlayCount}</span>
                          )}
                        </Space>
                      </Descriptions.Item>
                    </Descriptions>
                  )}
              </div>
              <div> {viewEditionSnapshot(details)}</div>
            </div>
            <Divider />

            {viewContent(details)}
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};
export default DetialRecord;
